
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!-- pageEncoding="UTF-8"%> -->
<%@ taglib uri="/struts-tags" prefix="s"%>

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
	.hea_thoitrang{
		color: red;
		position: relative;
	}
	.khung{
		position: absolute;
		top: 0px;
		margin: 10px 0px;
		height: 90px;
		width: 60px;
		background: url('sources/icon/icon_tre.png');
		background-size:60px 90px;
		background-repeat:no-repeat;
	}
	.khung IMG{
		
	}
	.chu{
		position: absolute;
		top: 0px;
		margin: 20px 0px;
		height: 60px;
		font-size: 50px;
		font-weight: bold;
		color: white;
		text-shadow: -2px 1px 0.1em black;
	}
</style>
<title>myLife-Thời trang trẻ em</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript" src="1.7.2.jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var rongmh = $(window).width();
		var vitri = $(window).width()*15/100;
		$('.hea_thoitrang').css({'left':-vitri - 1 + 'px'});
		$('.hea_thoitrang IMG').css({'width':rongmh + 'px'});
		$('.khung').css({'margin-left': vitri + 'px'});
		var w_khung = $('.khung').width();
		$('.chu').css({'margin-left': vitri + w_khung + 20 + 'px'});
	});
</script>

</head>
<body>
	<tiles:insertTemplate template="Template.jsp">
	<tiles:putAttribute name="focusbody">
	<div class="hea_thoitrang"><img src="sources/icon/bg_treem.png"/>
		<div class="khung"><img src=""/></div>
		<div class="chu">Thời trang trẻ em</div>
	</div>
		<div class="imgContent">
			<div class="connua" style="text-align: center"></div>
			
			<div class="rowPic">
				<s:set name="myListSize" value="%{#attr['spList'].size}"/>
				<s:set name="start" value="%{#attr['start']}" />
				<s:set name="stop" value="%{#attr['stopTre']}" />
				<s:set name="curidsp" value="%{#attr['idsp']}" />
				
					<s:iterator begin="#start" end="#stop" value="spList"> <!-- value="spList" var="sp"> -->
							
							<div class="frame" id="<s:property value="idSP" />">
								<a href="detail?idsp=<s:property value="idSP"/>">
									<img class="thumbIMG" src="<s:property value="srcImg" />"/></a>
								<div class="above"><a class="thongtin">Số Lượng: <s:property value="soLuongTon" /></a></div>
								<div class="under">
									<div class="infor"><s:property value="tenSP" /></div>
									<div class="rate"><s:property value="gia" /></div>
									<a href="detail?idsp=<s:property value="idSP"/>">
										<img src="sources/icon/next.png">
									</a>
								</div>
							</div>
					</s:iterator>
			
			
			</div>
			
			
	  </div>
	  
	  <div class="paging">
	  	<a class="pre"></a>
	  	<a class="tab1" href="">1</a>
	  	<a class="tab2" href="">2</a>
	  	<a class="tab3" href="">3</a>
	  	<a class="tab4" href="">4</a>
	  	<a>...</a>
		<a class="nex"></a>
	  	
	  </div>
	  <script language="javascript">
	  var soluonghinh = 9;
		$('.pre').text("<<");
		$('.nex').text(">>");
	  	var value_stop = parseInt("<s:property value='%{#myListSize}'/>");
	  	var checkCount = parseInt(value_stop/soluonghinh + 1);
		var value_cur = parseInt("<s:property value='%{#start}'/>");
		
		var stop;/*Kiem tra tab cuoi cung co thoa de hien san pham ko */
		
		var value = parseInt(1);
		if(value <= 0){
			value = 1;
		}
		if(value >= checkCount){
			value = checkCount - 3;
		}
		
		if(checkCount == 1){
			$('.tab1').text(value);
			$('.tab2').remove();
			$('.tab3').remove();
			$('.tab4').remove();
			$('.pre').remove();
			$('.nex').remove();
		}else if(checkCount == 2){
			$('.tab1').text(value);
			$('.tab2').text(value + 1);
			$('.tab3').remove();
			$('.tab4').remove();
			$('.pre').remove();
			$('.nex').remove();
		}else if(checkCount == 3){
			$('.tab1').text(value);
			$('.tab2').text(value + 1);
			$('.tab3').text(value + 2);
			$('.tab4').remove();
			$('.pre').remove();
			$('.nex').remove();
		}else{
			$('.tab1').text(value);
			$('.tab2').text(value + 1);
			$('.tab3').text(value + 2);
			$('.tab4').text(value + 3);
			
		}
		
		$('.pre').click(function(){
			value = value - 1;
			if(value <= 0)
				value = 1;
			$('.tab1').text(value);
			$('.tab2').text(value + 1);
			$('.tab3').text(value + 2);
			$('.tab4').text(value + 3);
		});
	
		$('.nex').click(function(){
			value = value + 1;
			if(value >= checkCount - 3){
				value = checkCount - 3;
				
			}
			$('.tab1').text(value);
			$('.tab2').text(value + 1);
			$('.tab3').text(value + 2);
			$('.tab4').text(value + 3);
		});
		
		
		
		$(function() {
			$.fn.getCurId=function(){
				$(this).click(function(){
					var t = $(this).text();
					var s = t-1;
					if(t == checkCount){
						stop = s*soluonghinh + (value_stop - (s*soluonghinh) - 1);
					}else{
						stop = s*soluonghinh + soluonghinh - 1;
					}
		  			var hre = "showsptre?start= " + (s*soluonghinh) + "&stopTre= " + stop;
		  			$(this).attr('href',hre);
				});
				
	  		};
		});
		$(function() {
			$(".tab1").getCurId();
			$(".tab2").getCurId();
			$(".tab3").getCurId();
			$(".tab4").getCurId();
		});
	/*
	 * Tao Paging de chuyen trang
	 * param: pre, nex
	 * 
	 * */
		$('.frame IMG').css({'cursor':'pointer'});
		$('.paging').css({'position':'relative','height':'40px', 'width':'100%',
			'margin-bottom':'40px'});
		$('.paging a').css({'line-height':'40px','text-align':'center','float':'left','height':'40px', 
		'width':'40px', 'background':'green', 'margin-left':'10px','cursor':'pointer', 'color':'white',
		'text-decoration':'none'});
		
		$('.paging a.pre').css({'background':'#B80000'});
		$('.paging a.nex').css({'background':'#B80000'});
		
		$(function() {
			$.fn.hoverTab=function(){
	  			$(this).hover(function(){
		  			$(this).css({'background': '#003D00'});
		  		}, function(){
		  			$(this).css({'background': 'green'});
		  		});
	  		};
		});
		$(function() {
			$(".tab1").hoverTab();
			$(".tab2").hoverTab();
			$(".tab3").hoverTab();
			$(".tab4").hoverTab();
		});
		
		/*
		 * Chuyen dinh dang Gia tien tu: 99888 --> 99.888
		 * Ham: reverse() --> Dao nguoc chuoi
		 * Ham: format() --> Dinh dang lai Gia tien cho de nhin
		 * */
		function reverse (s) {
		    var o = '';
		    for (var i = s.length - 1; i >= 0; i--)
		        o += s[i];
		    return o;
		}

		function format (s) {
		    var o = '';
		    for (var i = 0; i < s.length ; i++){
		    	if(i%3 == 0 && i!=0){
		    		o += "." + s[i] ;	
		    	}else{
		    		o += s[i];
		    	}
		    	
		    }
		    return o;
		}

		var countFra = $('.rowPic .frame').find('.rate').length;
		var rateStr = [];
		//In put thong tin gia tien vao rateStr
		for(var i = 0; i < countFra; i++){
			var temp = parseInt($('.rowPic .frame:eq(' + i + ')').find('.rate').text(), 10);
			var ee = String(temp);
			var re = reverse(ee);
			var fo = format(re);
			rateStr.push(reverse(fo));
		}

		$('.rate').text("");
		//Out put thong tin gia tien ra
		for(var i = 0; i < rateStr.length; i++){
			$('.rowPic .frame:eq(' + i + ')').find('.rate').text(rateStr[i]);
			$('.rowPic .frame:eq(' + i + ')').find('.rate').append("<sup>đ</sup>");
		}
	  </script>
	</tiles:putAttribute>
	</tiles:insertTemplate>
</body>
</html>